<template>
	<view class="shou">
		<div class="shou-shang">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item class="swiper-item">
								<image src="../../static/img/1.jpg" mode="aspectFill" class="imag"></image>
							</swiper-item>
							<swiper-item class="swiper-item">
								<image src="../../static/img/2.jpg" mode="aspectFill" class="imag"></image>
							</swiper-item>
							<swiper-item class="swiper-item">
								<image src="../../static/img/3.jpg" mode="aspectFill" class="imag"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</div>
		<div class="shou-zhong">
			<div class="shou-zhongs">
				<div class="shou-zhong-left" @click="diandan">
					<img src="../../static/img/1.png" mode="aspectFill" />
					<h1>门店自取</h1>
					<p>下单免排队</p>
				</div>
				<div class="shou-zhong-zhong"></div>
				<div class="shou-zhong-right" @click="dizhi">
					<img src="../../static/img/2.png" mode="aspectFill" />
					<h1>外卖</h1>
					<p>无需接触 送喜到家</p>
				</div>
			</div>
		</div>
		<div class=shou-xia>
			<div>
				<div @click="baihuo">
					<img src="../../static/img/3.png" alt="">
					<h1>喜茶百货</h1>
				</div>
				<div>
					<p>新装气泡水畅饮更尽兴</p>
				</div>
			</div>
			<div>
				<div>
					<img src="../../static/img/3.png" alt="">
					<h1>阿西团餐</h1>
				</div>
				<div>
					<p>最高享9折火热预定中</p>
				</div>
			</div>
		</div>
		<div class="shou-bottom">
			<div class="bottom-left" @click="jifen">
				<h1>我的积分 22</h1>
				<p>可兑换喜茶卷和丰富灵感周边</p>
			</div>
			<div class="bottom-right">
				<img src="../../static/img/4.png" alt="">
				<p>会员码</p>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
            diandan(){
				uni.switchTab({
				    url: '/pages/ordermeal/ordermeal'
				})
			},
			baihuo(){
				uni.switchTab({
				    url: '/pages/department/department'
				})
			},
			jifen(){
				uni.navigateTo({
				    url: '/pages/home/jifen'
				})
			},
			dizhi(){
				uni.redirectTo({
				    url: '/pages/home/dizhi'
				})
			}
		}
	}
</script>

<style scopet>
	.shou {
		width: 100vw;
		height: 100vh;
	}

	.shou-shang {
		width: 100%;
		height: 250px;
	}

	.uni-padding-wrap {
		width: 100%;
		height: 100%;
	}

	.page-section {
		width: 100%;
		height: 100%;
	}

	.page-section-spacing {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
		line-height: 50px;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.imag {
		width: 100%;
		height: 100%;
	}

	.shou-zhong {
		width: 100%;
		height: 180px;
		position: relative;
	}

	.shou-zhongs {
		width: 90%;
		height: 180px;
		position: absolute;
		top: -20px;
		margin: 0 5%;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 1px 2px #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.shou-zhong-left {
		width: 100px;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.shou-zhong-zhong {
		width: 1px;
		height: 100px;
		background: #ccc;
	}

	.shou-zhong-right {
		width: 100px;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.shou-zhong-left img {
		width: 30px;
		height: 40px;
	}

	.shou-zhong-left h1 {
		font-size: 15px;
		font-weight: 600;
		line-height: 25px;
	}

	.shou-zhong-left p {
		font-size: 10px;
	}

	.shou-zhong-right img {
		width: 40px;
		height: 40px;
	}

	.shou-zhong-right h1 {
		font-size: 15px;
		font-weight: 600;
		line-height: 25px;
	}

	.shou-zhong-right p {
		font-size: 10px;
	}

	.shou-xia {
		width: 90%;
		height: 100px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.shou-xia>div {
		width: 48%;
		height: 80px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: rgb(234, 235, 236);
	}

	.shou-xia>div>div {
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shou-xia>div>div img {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.shou-xia>div>div h1 {
		font-size: 15px;
	}

	.shou-xia>div>div p {
		font-size: 12px;
		color: rgb(170, 170, 170);
	}
	.shou-bottom{
		width: 90%;
		height: 80px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.bottom-left{
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.bottom-left h1{
		font-size: 15px;
		line-height: 30px;
	}
	.bottom-left p{
		font-size: 12px;
		color: rgb(127, 127, 127);
	}
	.bottom-right{
		width: 20%;
		height: 100%;
		border-left: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.bottom-right img{
		width: 30px;
		height: 30px;
	}
	.bottom-right p{
		font-size: 15px;
		line-height: 30px;
	}
</style>
